<template>
  <div class="UpdateOrg-container">
    <a-modal v-model="modalVisible" destroyOnClose :width="1200" title="组织信息" @cancel="modalVisible = false">
      <a-tabs :activeKey="activeKey" @tabClick="handleTabClick">
        <a-tab-pane v-for="item in tabsList" :key="item.key" :tab="item.label" :disabled="disabledJob && item.key === 'Job'">
          <div class="content-wrapper" v-if="item.key === 'Basic'">
            <title-name title="组织基本信息"></title-name>
            <CompanyBasicInfoModal ref="companyBasicInfo" :disabled="disabledAll" :transmit="transmit" @typeChange="typeChange" />
          </div>
          <div class="content-wrapper" v-if="item.key === 'Job'">
            <title-name title="岗位信息"></title-name>
            <PostManage ref="postManage" :orgId="orgId" :disabled="disabledAll" />
          </div>
        </a-tab-pane>
      </a-tabs>
      <div style="text-align: right;">
        <a-button
          v-show="pageType !== 'look' && activeKey === 'Basic'"
          type="primary"
          :disabled="disabledJob"
          :loading="loading.isNext"
          @click="handleNext"
        >下一步</a-button>
      </div>
      <template #footer>
        <div class="tool-btns">
          <a-button v-if="pageType !== 'look'" :loading="loading.isSubmit" type="primary" @click="handleSubmit">提交</a-button>
          <a-button class="ml12" type="default" @click="modalVisible = false">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import CompanyBasicInfoModal from './CompanyBasicInfoModal.vue'
import PostManage from './postManageModal'
import { checkBaseOrgIsRelation } from '@/api/system/system'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    transmit: {
      type: Object,
      default: {}
    },
  },
  components: {
    CompanyBasicInfoModal,
    PostManage
  },
  data() {
    return {
      disabledJob: true,
      activeKey: 'Basic',
      tabsList: [
        { label: '基本信息', key: 'Basic' },
        { label: '岗位信息', key: 'Job' }
      ],
      loading: {
        isNext: false,
        isSubmit: false
      },
      hasSubmit: false,
      pageType: 'add',
      orgId: this.transmit.id || ''
    }
  },
  computed: {
    modalVisible: {
      get: function () {
        this.pageType = this.transmit.pageType || 'add'
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    // pageType() {
    //   return this.transmit.pageType || 'add'
    // },
    disabledAll() {
      return this.pageType === 'look'
    },
  },
  watch: {
    visible: {
      handler(val) {
        if(val){
          this.init()
        }else if(this.hasSubmit){
          this.$emit('change')
        }
      },
    }
  },
  methods: {
    typeChange(val){
      this.disabledJob = val;
    },
    init(){
      this.loading = {
        isNext: false,
        isSubmit: false
      }
      this.orgId = this.transmit.id || ''
      this.activeKey = 'Basic'
      this.hasSubmit = false
      if(this.transmit.type == '2' || this.transmit.type == '7'){
        this.disabledJob = false
      }else{
        this.disabledJob = true
      }
    },
    //基础组织架构是否关联公司
    async isCheckBaseOrgIsRelation(id) {
      if (!id) {
        return
      }
      let res = await checkBaseOrgIsRelation(id)
      this.disabledJob = !res || false
    },
    handleSubmit(next) {
      this.hasSubmit = true
      if (this.activeKey === this.tabsList[1].key) {
        if (next !== 'next'){
          this.$message.success('提交成功')
          this.modalVisible = false
        }
        return
      }
      
      this.loading.isSubmit = true
      this.$refs['companyBasicInfo'][0].handleSubmit(res => {
        if(res.type == '2' || res.type == '7'){
          this.disabledJob = false
        }
        this.orgId = res.id
        this.pageType = 'edit'
        this.loading.isSubmit = false
        // if(this.activeKey === this.tabsList[1].key){
          if (next !== 'next'){
            this.modalVisible = false
          }
          this.activeKey = this.tabsList[1].key;
        // }
      }, () => {
        this.loading.isSubmit = false
      })
    },
    handleNext() {
      this.handleSubmit('next')
    },
    handleTabClick(key) {
      if(this.pageType === 'look' || (this.pageType == 'edit' && !this.disabledJob)){
        this.activeKey = key
      }
    }
  }
}
</script>
